<template>
	<el-card>
		<el-row>
			<el-col :span="10">
				
				<el-upload class="avatar-uploader" action :show-file-list="false" :on-change="handleAvatarSuccess"
					accept=".mp4" :auto-upload="false"  >
					<video v-if="imageUrl" :src="imageUrl" class="avatar" autoplay="autoplay" controls="controls"></video>
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
				
			</el-col>
			<el-col :span="4" style="min-height: 1px;"></el-col>
			<el-col :span="10">
				<img v-if="resultUrl" :src="resultUrl" class="avatar" style="display: inline-block;">
			</el-col>

		</el-row>
		 
		<el-button type="success" @click="tj">提交</el-button>
		
		 <el-table :data="tableData" style="width: 100%;" :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}" >
		 	<el-table-column prop="face" label="脸部坐标" min-width="20%">
		 	</el-table-column>
		 	<el-table-column prop="eye" label="眼睛坐标" min-width="30%">
		 	</el-table-column>
		 	<el-table-column prop="smile" label="嘴巴坐标" min-width="30%">
		 	</el-table-column>
		 	<el-table-column prop="faceimg" label="脸部" min-width="20%">
		 		<template slot-scope="scope">
		 			<img :src="baseStaticURL+scope.row.faceimg" min-width="70" height="70" />
		 		</template>
		 	</el-table-column>
		 </el-table>
        
		
	</el-card>
</template>


<script>
	export default {
		data() {
			return {
				imageUrl: null,
				resultUrl: '',
				file: null,
				tableData: []
			};
		},
		methods: {
			handleAvatarSuccess(file) {
				console.log(file)
				this.imageUrl = URL.createObjectURL(file.raw);   //本地
				this.file = file
			},

			tj() {
				let fd = new FormData();
				fd.append("file", this.file.raw);
				// fd.append("user",JSON.stringify({
				// 	k1:"1"
				// }))
				this.$axios.post("app/v1", fd).then(res => {
					console.log(res)
					this.resultUrl = this.baseStaticURL + res.data.p
					this.tableData = res.data.c

				})

				this.$message.success("返回成功！");
				// this.getList();
			}
		}
	}
</script>

<style scoped>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 400px;
		line-height: 400px;
		text-align: center;
	}

	.avatar {
		width: 400px;
		height: 400px;
		display: block;
	}
</style>
